<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">1</button>
		<button type="button">2</button>
		<button type="button">3</button>
		<button type="button">4</button>
		<button type="button">5</button>
		<button type="button">6</button>
	</body>
	<script type="text/javascript">
		
		// ES5作用域,没有if和for的作用域,必须借助function来解决块级作用域的方法
		// 1.变量作用域:变量在什么范围是可用的
		{
			var name = "lion";
			console.log(name);
		}
		console.log(name);
		// 在里面定义的内容在外部也能访问
		
		// 2.没有块级作用域引起的问题
		if(true){
			var name = 'why';
			
			func = function(){
				console.log(name);
			}
		}
		console.log(name);
		name = 'kobe';
		func();
		// 由于var没有块级作用域,造成能随意修改name
		
		var btns = document.getElementsByTagName('button');
		for(var i=0; i<btns.length; i++){
			btns[i].addEventListener('click',function(){
				console.log("第"+i+'个按钮被点击');
			})
		}
		// 无论第几个按钮都会点击会打印第6个按钮被点击因为变量的时候被改掉了
		//解决方法1:闭包
		// 为什么闭包可以解决我们的问题,因为函数是有作用域的
		var btns = document.getElementsByTagName('button');
		for(var i=0; i<btns.length; i++){
			(function(i){
				btns[i].addEventListener('click',function(){
					console.log("第"+i+'个按钮被点击');
				})
			})(i);
		}
		
		// ES6,let定义的每个i都有自己的作用域
		const btns = document.getElementsByTagName('button');
		for(let i=0; i<btns.length; i++){
			btns[i].addEventListener('click',function(){
				console.log("第"+i+'个按钮被点击');
			})
		}
	</script>
</html>
